import React from "react";
import { sleep } from 'antd-mobile/es/utils/sleep'
import styles from '@/assets/css/guest.module.css';
import type BusinessType from "@/types/business";
import type GuestType from '@/types/guest';

const Index =  () =>
{
    // 用户信息
    const [business] = useState<BusinessType>(React.business);

    const [list,SetList] = useState<GuestType[]>([]);
    // 上拉加载状态 进入这个页面默认开启自动加载
    const [HasMore,SetHasMore] = useState<boolean>(true);
    // 当前页
    const [page,SetPage] = useState<number>(1);

    // 下拉刷新
    const OnRefresh = async () =>
    {
        await sleep(1500);
        SetList([]);
        SetPage(1);
        SetHasMore(true);
    }

    // 上拉加载
    const OnLoadMore = async () =>
    {
        await sleep(1500);
        await GetGuestData();
    }

    // 请求数据
    const GetGuestData = async () =>
    {
        const params = {
            busid:business.id,
            page
        }

        const result = await React.http.post('/guest/index',params);

        if(result.code === 1)
        {
            // 查询数据的总数
            const count = result.data.count;

            // 当前列表的数据总数
            let ListCount = 0;

            SetList((v:GuestType[]) =>
            {
                const data = [...v,...result.data.list];

                ListCount = data.length;

                return data;
            });

            if(ListCount >= count)
            {
                SetHasMore(false);

                return false;
            }

            SetPage(v => v + 1);
        }else{
            SetHasMore(false);

            React.fail(result.msg);
        }
    }

    const OnGuestDelete = (guestid:number,index:number) =>
    {
        React.confirm({
            title:'删除住客',
            content:'是否确认删除该住客？',
            onConfirm:async () =>
            {
                const result = await React.http.post('/guest/del',{guestid,busid:business.id});

                if(result.code === 1)
                {
                    React.success(result.msg,() =>
                    {
                        // 第一种方式
                        // SetList(list.filter(item => item.id !== guestid));

                        // 第二种方式
                        list.splice(index,1);

                        console.log(list);

                        SetList([...list]);
                    });
                }else{
                    React.fail(result.msg);
                }
            }
        })
    }

    // 定义右侧滑动按钮
    const RightBtn = [
        {
            key: 'delete',
            text: '删除住客',
            color: 'danger'
        }
    ]

    return (
        <>
            {/* 下拉刷新 */}
            <div className={styles.list}>
                <React.UI.PullToRefresh onRefresh={OnRefresh}>
                    {/* 列表结构 */}
                    <React.UI.List>
                        {list.map((item: GuestType, key: number) => (
                            <React.UI.SwipeAction
                                key={key}
                                rightActions={RightBtn}
                                onAction={() => OnGuestDelete(item.id,key)}
                            >
                                <React.UI.List.Item
                                    key={key}
                                    description={item.mobile}
                                    onClick={() => React.navigate(`/guest/edit?guestid=${item.id}`)}
                                >
                                    {item.nickname}({item.gender_text})
                                </React.UI.List.Item>
                            </React.UI.SwipeAction>
                        ))}
                    </React.UI.List>

                    {/* 上拉加载 */}
                    <React.UI.InfiniteScroll
                        loadMore={OnLoadMore}
                        hasMore={HasMore}
                        threshold={0}
                    />

                </React.UI.PullToRefresh>
            </div>

            {/* 添加按钮 */}
            <div className={styles.AddGuest}>
                <Link to="/guest/add">添加住客</Link>
            </div>
        </>
    )
}

export default Index;